<template>
  <div class="box">
    <div class="box-header">
      <span class="title pos-left">{{title}}</span>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-cvm-waterstatus"></div>
      <x-loading :show="showLoading"></x-loading>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";

export default {
  name: "",
  data() {
    return {
        showLoading:false,
        option:null,
        chartInstance:null
    };
  },
  props:{
      title:String
  },
  components: {
    "x-loading": Loading
  },
  mounted() {
      this.renderChart()
  },
  methods: {
      renderChart(){
          this.showLoading=true
          axios.get(this.URLHEAD_AGENT + 'http://jingwuyun.yihuangis.com:9999/xfweb/Waterinfo/getWaterStatus').then(res=>{
              let json = res.data
              let obj = [
                  {name:'状态正常',value:json.tcount[0][1]},
                  {name:'压力不足',value:json.tcount[1][1]},
                  {name:'已损坏',value:json.tcount[2][1]}
              ]
              this.option = {
                  tooltip:{show:true,trigger:'axis',formatter:'{a}:{b}\n{c}'},
                  legend:{x:'center',y:'top',orient:'horizontal',data:['状态正常','压力不足','已损坏'],
                  textStyle:{color:'#fff',fontSize:12},
                  itemWidth:10,itemHeight:10},
                  color:[this.COLORS[2],this.COLORS[4],this.COLORS[7]],
                  series:[{
                      type:'pie',
                      center:['50%','55%'],
                      radius:['50%','70%'],
                      data:obj,
                      itemStyle:{
                          normal:{
                              shadowOffsetX:2,
                              shadowOffsetY:2,
                              shadowBlur:10,
                              shadowColor:'#00000033'
                          }
                      },
                      label:{
                          show:true,
                          position:'outside',
                          formatter:'{b}:\n{c}个'
                      }  
                  }]
              }
              this.$Crender('chart-cvm-waterstatus',this.option)
              this.showLoading=false
          })
      }
  },
};
</script>

<style lang="" scoped>
</style>